const path = require("path");
const HtmlWebpackPulgin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const publicPath =  "/";
module.exports = {
	mode: "production",
	entry: "./src/main.ts",
	output: {
		filename: "static/js/[name].[hash:6].js",
		path: path.resolve(process.cwd(), "dist"),
        publicPath
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				exclude: /node_modules/,
				use: [
					{
						loader: "vue-loader"
					}
				]
			},
			{
				test: /\.ts$/,
				exclude: /node_modules/,
				use: [
					{
						loader: "ts-loader",
						options: {
							appendTsSuffixTo: [/\.vue$/]
						}
					}
				]
			},
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							plugins: [require("autoprefixer")()]
						}
					}
				]
			},
			{
				test: /\.less$/,
				use: [
					MiniCssExtractPlugin.loader,
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							plugins: [require("autoprefixer")()]
						}
					},
					"less-loader"
				]
			},
			{
				test: /\.(eot|woff2?|ttf|svg)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							name: "[name]-[hash:5].min.[ext]",
							limit: 5000,
							name: "static/fonts/[name].[hash:8].[ext]",
							publicPath
						}
					}
				]
			},
			{
				test: /\.(jpg|png|gif|jpeg)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							limit: 10000,
							name: "static/img/[name].[hash:8].[ext]"
						}
					}
				]
			}
		]
	},
	plugins: [
		new CleanWebpackPlugin(),
		new VueLoaderPlugin(),
		new MiniCssExtractPlugin({
			filename: "static/css/[name].[hash:8].css",
			chunkFilename: "static/css/[name].[hash:8].css"
		}),
		new OptimizeCssAssetsPlugin(),
		new HtmlWebpackPulgin({
			isDev: false,
			filename: "index.html",
			template: "./public/index.html",
			inject: "body",
			hash: true
		})
	],
	resolve: {
		alias: {
			"@": path.resolve(process.cwd(), "src")
		},
		extensions: [".ts", ".vue", ".js"]
	},
	optimization: {
		splitChunks: {
			chunks: "all"
		}
	}
};
